<template>
    <section class="order-confirmation-main base-main">
      <!--地址-->
      <div class="address-box pdlr15 pr">

        <!--无地址-->
        <div class="address-none" v-if="addressNone">
          <van-row>
            <van-col span="1">
              <i class="color7E82F6 iconfont icondizhibiaoshix"></i>
            </van-col>
            <van-col span="22">
              请填写收货地址
            </van-col>
            <van-col span="1">
              <i class="iconfont icongengduox"></i>
            </van-col>
          </van-row>
        </div>
        <!--无地址-->

        <!--有地址-->
        <div class="address-be pr" v-if="!addressNone" @click="handleAddressPop">
          <van-row>
            <van-col span="1">
              <i class="color7E82F6 p-position iconfont icondizhibiaoshix"></i>
            </van-col>
            <van-col span="22">
              <div class="msg p-position">
                <p>莉萝小 <span>13958483448</span></p>
                <p>广东省广州市花都区迎宾大道116号索弗大厦</p>
              </div>
            </van-col>
            <van-col span="1">
              <i class="p-position iconfont icongengduox"></i>
            </van-col>
          </van-row>
        </div>
        <!--有地址-->

        <img class="pa" src="../../assets/img/envelope_bg.png" alt="">
      </div>
      <!--地址-->

      <!--列表-->
      <div class="product-box mt10">
        <BuyProductShow :dataList="dataList"></BuyProductShow>
      </div>
      <!--列表-->

      <!--桶装水-->
      <div class="product-box mt10">
        <WaterProduct
          :data="waterData"
          @send-minus="sendMinus"
          @send-add="sendAdd"/>
      </div>
      <!--桶装水-->

      <!--cell-->
      <div class="order-cell-box mt10">
        <van-cell title="配送方式" is-link value="快递 免邮费" />
        <van-cell title="积分抵扣" is-link value="100积分抵10元" />
        <van-cell title="优惠券" is-link value="满100减20" @click="showPop('coupon')" />
        <van-field v-model="message" label="买家留言：" placeholder="选填 请填写留言" />
      </div>
      <!--cell-->

      <!--金额-->
      <div class="order-pay-box bgcFFF mt10">
        <p>
          商品总额
          <span>
            ￥<strong>320</strong>.00
          </span>
        </p>
        <p>
          运费
          <span class="colorF54E4E">
            + ￥<strong>320</strong>.00
          </span>
        </p>
        <p>
          优惠
          <span class="colorF54E4E">
            - ￥<strong>320</strong>.00
          </span>
        </p>
      </div>
      <!--金额-->

      <!--提交-->
      <div class="order-sub line-top" @click="showPop">
        <div class="order-pay bgcFFF text-r">
          合计金额：<span class="colorF54E4E">￥ <strong>300</strong>.00</span>
        </div>
        <div class="order-btn flr text-c">
          立即提交
        </div>
      </div>
      <!--提交-->

      <!--优惠券弹窗-->
      <BottomPop
        v-if="isCouponPop"
        :isShowPop="isShowPop"
        :titleText="titleText"
        :closeText="closeText"
        :bgc="bgc"
        @sendcloseval="closeP"
      >
        <!--优惠券-->
        <div class="coupon-box pr">
          <!--title-->
          <div class="coupon-box-title bgcFFF line-bottom">
            <van-row>
              <van-col span="12">
                <span class="text-c pr" :class="activeCoupon == 1 ? 'active' :''" @click="handleUseCoupon(1)">可用优惠券（2）</span>
              </van-col>
              <van-col span="12">
                <span class="text-c pr" :class="activeCoupon == 2 ? 'active' :''" @click="handleUseCoupon(2)">不可用优惠券（2）</span>
              </van-col>
            </van-row>
          </div>
          <!--title-->
          <!--优惠券列表-->
          <div class="coupon-list">
            <Coupon
              v-if="couponData.length > 0"
              :couponData="couponData"
              @send-coupon="sendCoupon"
            ></Coupon>

            <div class="none-coupon"
              v-if="couponData.length < 1">
              <img src="../../assets/img/icon_none_coupon.png" alt="">
              <p>无可用优惠券</p>
              <p>去领券中心看一看吧</p>
            </div>
          </div>
          <!--优惠券列表-->
        </div>
        <!--优惠券-->
      </BottomPop>
      <!--优惠券弹窗-->

      <!--支付弹窗-->
      <BottomPop
        v-if="isPayPop"
        :isShowPop="isShowPop"
        :titleText="titleText"
        :closeText="closeText"
        :bgc="bgc"
        iconleft="true"
        @send-pay="sendPay">
        <!--支付-->
        <div class="pay-box bgcFFF text-c">
          <p class="pay-num color45454D">￥320.00</p>
          <ul class="text-l">
            <li class="line-bottom color7A7B82">支付方式</li>
            <li class="line-bottom" >
              <i class="iconfont iconkefux"></i>
              微信支付
              <span>
                <van-checkbox v-model="payChecked"></van-checkbox>
              </span>
            </li>
          </ul>
        </div>
      </BottomPop>
      <!--支付弹窗-->

      <!--地址弹窗-->
      <div class="address-pop">
        <van-popup
          v-model="isShowAddress"
          position="right"
          :overlay="false">
          <div class="address-choose-box base-main">
            <div class="first-address line-bottom bgcFFF pr" @click="isShowAddress = false">
              <span>
                <i class="iconfont icondagou1"></i>
              </span>
              <div class="msg pr">
                <p>莉萝小<i>13958483448</i></p>
                <p class="addressDetail color7A7B82 fs12">
                  广东省广州市花都区迎宾大道116号索弗大厦
                </p>
                <i class="iconfont icondagou1 pa" @click="isEdit=true"></i>
              </div>
            </div>

            <div class="address-choose-list">
              <ul>
                <li class="bgcFFF line-bottom" @click="handleChooseAdd">
                  <div class="msg pr">
                    <p>莉萝小<i>13958483448</i><sub class="inline-block text-c pr">默认</sub> </p>
                    <p class="addressDetail color7A7B82 fs12">
                      广东省广州市花都区迎宾大道116号索弗大厦
                    </p>
                    <i class="iconfont icondagou1 pa" @click.stop="isEdit=true"></i>
                  </div>
                </li>
              </ul>
            </div>

            <div class="btn bgcFFF text-c">
              <span class="inline-block text-c">+ 新建收货地址</span>
            </div>

            <van-popup
              v-model="isEdit"
              position="right"
              class="new-pop">

                <van-address-edit
                  :area-list="areaList"
                  show-set-default
                  show-search-result
                  @save="handleSave"
                  save-button-text="保存并使用"
                />
              <p class="btn-close text-c">
                <span class="inline-block text-c" @click="isEdit=false">关闭</span>
              </p>

            </van-popup>
          </div>
        </van-popup>
      </div>
      <!--地址弹窗-->
    </section>
</template>

<script type="text/ecmascript-6">
  import BuyProductShow from '../../components/BuyProductShow.vue'
  import BottomPop from '../../components/BottomPop.vue'
  import Coupon from '../../components/Coupon.vue'
  import WaterProduct from '../../components/WaterProduct.vue'
  import { areaList } from '../../assets/js/area'

  export default {
    components:{
      BuyProductShow,BottomPop,Coupon,WaterProduct
    },
    data() {
      return {
        addressNone:false,//默认地址是否已设置
        dataList:[
          {
            src:'http://p8.qhimg.com/t010ba058d19e5d5bab.jpg',
            name:'商品名称商品名称',
            model:'规格型号',
            price:'80.00',
            num:2
          },
          {
            src:'http://p8.qhimg.com/t010ba058d19e5d5bab.jpg',
            name:'商品名称商品名称',
            model:'规格型号',
            price:'80.00',
            num:2
          },
        ],//商品列表数据
        message:'',//留言
        loadingBtn:false,//点击提交按钮显示loading状态
        isShowPop: false,//是否显示弹窗
        isCouponPop:false,//是否优惠券弹窗
        isPayPop:false,//是否支付弹窗
        titleText:'选择优惠券',
        closeText:'关闭',
        bgc:'',
        activeCoupon:1,//优惠券菜单切换
        couponData:[],//优惠券数据
        unsabel:[
          {
            sum:'30',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'1',
            use:0,
            checked:0
          },
          {
            sum:'10',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'2',
            use:0,
            checked:0
          },
          {
            sum:'40',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'3',
            use:0,
            checked:0
          },
        ],
        useData:[
          {
            sum:'30',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'1',
            use:1,
            checked:1
          },
          {
            sum:'10',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'2',
            use:1,
            checked:1
          },
          {
            sum:'40',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'3',
            use:1,
            checked:1
          },
          {
            sum:'40',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'3',
            use:1,
            checked:1
          },
          {
            sum:'40',
            condition:'满100元可用',
            name:'优惠券名称优惠券名称优惠券优惠券名称优惠券名称优惠券',
            validity:'2018.04.24 ~ 2018.08.24',
            id:'3',
            use:1,
            checked:1
          }

        ],
        payChecked:true,//支付方式
        isShowAddress:false,//地址弹窗
        isEdit:false,
        checkedAdd: '1',
        areaList:areaList,
        waterData: [
          {
            id: 1,
            src:'http://p8.qhimg.com/t010ba058d19e5d5bab.jpg',
            name: '5升桶装水',
            number: 2
          }
        ], //
      }
    },
    created(){
      this.$nextTick(function(){
        let index = $('.product-show-box').length -1;
        $('.product-show-box').eq(index).removeClass('line-bottom');
      })
    },
    methods: {
      onSubmit(){
//        this.$router.push({
//          path:'/index/web/paymentSuccess',
//
//        })
      },
      //减
      sendMinus(item){
        if(this.waterData[0].number === 1) {
          this.$toast('不能再减了')
        } else {
          this.waterData[0].number--
        }

        console.log('sendMinus--', item);
      },
      //加
      sendAdd(item){
        this.waterData[0].number++
        console.log('sendAdd--', item);
      },
      //打开弹窗
      showPop(val){
        this.isShowPop = true;
        console.log('val--',val, this.isShowPop);
        if(val == 'coupon'){
          this.isCouponPop = true;
          this.isPayPop = false;
          this.titleText = '选择优惠券';
          this.closeText = '关闭';
          this.bgc='#F7F7F7';
        }else{
          this.isCouponPop = false;
          this.isPayPop = true;
          this.titleText = '确认付款';
          this.closeText = '立即支付';
          this.bgc='#FFFFFF';
        }
//        this.couponData = this.useData
      },
      //关闭弹窗
      closeP(val){
        console.log('val--', val);
//        this.isShowPop = val.show;
        this.isShowPop = false;
      },
      //打开地址弹窗
      handleAddressPop(){
        this.isShowAddress = true;
      },
      handleSave(){
        this.isEdit = false;
        this.isShowAddress = false;
      },
      //选择地址
      handleChooseAdd(){
        this.isShowAddress = false;
      },
      //点击了确认支付
      sendPay(val){
        console.log('点击了确认支付--', val);
        this.isShowPop = false;
        //支付成功后跳转到成功提示页
//         this.$router.push({
//          path:'/index/web/paymentSuccess',
//        })
      },
      //优惠券菜单切换
      handleUseCoupon(index){
        console.log('index--', index);

        this.couponData = index == 1 ? this.useData : this.unsabel
        this.activeCoupon = index
      },
      //选中优惠券
      sendCoupon(obj){
        console.log('选中优惠券--',obj);
        if(obj.item == '') {
          console.log('000')
        } else {
          console.log('11');
        }
//        this.isShowPop = false;
      }
    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/orderConfirmation';
</style>
